<template>
  <div>
    <ChoseDog v-for="(item,index) in list" :key="index"
    :dogImgUrl="item.dogImgUrl"
    :dogName="item.dogName"
    :index="index"
    @yy="click"/>
    <p>选择你喜欢的狗</p>
    <ul>
      <li v-for="(item,index) in arr " :key="index">{{item}}</li>
  
    </ul>
  </div>
</template>

<script>
import ChoseDog from './components/chose.vue'
export default {
  components: {
    ChoseDog,
  },
 
  data() {
    return {
     arr:[],
      list: [
        {
          dogImgUrl: 'https://i02piccdn.sogoucdn.com/f0d13bb489423a89',
          dogName: '博美',
        },
        {
          dogImgUrl: 'https://i01piccdn.sogoucdn.com/02a62dd4ecb9226e',
          dogName: '泰迪',
        },
        {
          dogImgUrl: 'https://i04piccdn.sogoucdn.com/becbe38dece4a392',
          dogName: '金毛',
        },
        {
          dogImgUrl: 'https://i01piccdn.sogoucdn.com/2d13a70110ffbde5',
          dogName: '哈士奇',
        },
        {
          dogImgUrl: 'https://i01piccdn.sogoucdn.com/77cc1aef573af9fc',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl: 'https://i04piccdn.sogoucdn.com/aebc67ebefb5a552',
          dogName: '萨摩耶',
        },
      ],
    }
  },
   methods:{
    click(index,name){
   console.log(index,name);
   this.arr.push(name)


}
  },
}
</script>

<style></style>
